<template>
  <div class="contain">
    <el-card style="margin: 20px">
      <!-- 添加菜单按钮 -->
      <div class="top">
        <i />
        <el-button type="success" size="small" @click="showDialog = true">
          添加菜单
        </el-button>
      </div>
      <!-- 表格区域 -->
      <el-table
        :data="menuList"
        style="width: 100%; margin-bottom: 20px; margin-top: 25px"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="title" label="标题" sortable>
          <template #default="{ row }">
            <i v-if="row.children" class="el-icon-s-management" />
            <i v-else class="el-icon-document-copy" />
            <span style="margin-left: 10px">{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" sortable />
        <el-table-column
          prop="address"
          label="操作"
          width="115px"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handelRestMenu(row)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handelDeleMuns(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加弹框 -->
    <add-menus
      :show-dialog.sync="showDialog"
      :menus-list="arrList"
      @add-success="getMenuList"
    />
    <!-- 修改弹框 -->
    <edit-menus
      :show-dialog.sync="showeditDialog"
      :menus-list="arrList"
      :menu-data="menuData"
      @add-success="getMenuList"
    />
  </div>
</template>

<script>
import { treetolist, list2Tree } from '@/utils/list2tree'
import { getMenuListAPI, delMenuAPI } from '@/api/menus'
import addMenus from './components/addMenus.vue'
import EditMenus from './components/editMenus.vue'
export default {
  name: 'Menus',
  components: { addMenus, EditMenus },
  data() {
    return {
      menuData: {},
      // 显示添加弹框
      showDialog: false,
      // 显示编辑弹框
      showeditDialog: false,
      // 树形数据
      menuList: [],
      // 数组数据
      arrList: []
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    // 修改弹框打开时
    handelRestMenu(obj) {
      this.showeditDialog = true
      this.menuData = obj
    },
    // 删除
    async handelDeleMuns(id) {
      await this.$confirm('确定删除此菜单吗？', '温馨提示', {
        type: 'warning'
      })
      try {
        // const resp =
        await delMenuAPI(id)
        // console.log(resp)
        this.$message.success('删除成功')
        this.getMenuList()
      } catch (error) {
        console.log(error)
      }
    },
    // 获取菜单列表
    async getMenuList() {
      // 获取原始数据
      const resp = await getMenuListAPI()
      // console.log('tree1', resp)
      // this.menuList = resp.data
      // 树转数组
      const arrList = treetolist(resp.data)
      this.arrList = arrList
      // console.log('arr', arrList)
      // 数组转树
      this.menuList = list2Tree(arrList, null)
      // console.log('tree2', this.menuList)

      // 存储树形数据到vuex
      // this.$store.commit('permission/setPerDate', this.menuList)
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
